<template>
  <el-dialog
    title="添加员工"
    :visible.sync="visible"
    :before-close="handleClose"
    width="40%"
  >
    <el-form ref="form" :model="form">
      <el-form-item
        label="选择归属门店"
        prop="store_id"
        :rules="{ required: true, message: '请选择归属门店', trigger: 'blur' }"
      >
        <el-select
          v-model="form.store_id"
          placeholder="请选择"
          size="small"
          style="margin-right:10px;"
          @change="getList"
        >
          <el-option
            v-for="item in options"
            :key="item.store_id"
            :label="item.name"
            :value="item.store_id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="筛选条件">
        <el-input
          v-model="form.searchName"
          placeholder="请输入名称"
          style="width: 70%;"
          size="medium"
        >
          <el-select
            slot="prepend"
            v-model="form.select"
            style=" width: 126px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optionsTwo"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="getList"
          ></el-button>
        </el-input>
      </el-form-item>
      <Table
        :data="listData"
        :max-height="360"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="客户名称" align="center">
          <template slot-scope="scope">
            <img
              :src="
                $store.state.qiniu + scope.row.cover + $store.state.imgRotate
              "
              width="55px"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="客户头像"
          align="center"
          property="nick_name"
        ></el-table-column>
        <el-table-column
          label="手机号"
          align="center"
          property="phone"
        ></el-table-column>
      </Table>
      <el-pagination
        style="text-align: center;margin-top: 10px;"
        :page-size="4"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </el-form>
    <span slot="footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { STORE_LIST } from "@/service/shop";
import { ADDSTAFF, COMMONUSERLIST } from "../../../service";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listData: [],
      Arr: [],
      pages: 1,
      totals: 0,
      form: {
        type: 1,
        store_id: "",
        select: 0,
        searchName: ""
      },
      options: [],
      optionsTwo: [{ label: "昵称", value: 0 }, { label: "手机号", value: 1 }]
    };
  },
  watch: {
    visible(v) {
      if (v) {
        this.getList();
        this.store();
      }
    }
  },
  methods: {
    handleSelectionChange(e) {
      this.Arr = e;
    },
    handleClose() {
      this.$emit("outDialog");
    },
    async handleSumbit() {
      let arr = [];
      this.Arr.forEach(ele => {
        arr.push(ele.member_id);
      });
      await this.$refs["form"].validate(valid => {
        if (valid) {
          ADDSTAFF({
            type: this.form.type,
            member_ids: arr.join(","),
            store_id: this.form.store_id
          }).then(({ code, msg }) => {
            if (code === 200) {
              this.$emit("outDialog", true);
            }
            this.$message({
              message: msg,
              type: code === 200 ? "success" : "error"
            });
          });
        }
      });
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 4
      };
      if (this.form.select === 0) {
        param.nick_name = this.form.searchName;
      } else {
        param.phone = this.form.searchName;
      }
      await COMMONUSERLIST(param).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          data.list.forEach(ele => {
            ele.radio = 2;
          });
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    async store() {
      let param = {
        page: 1,
        pageshow: 100000
      };
      await STORE_LIST(param).then(({ code, data }) => {
        if (code === 200) {
          this.options = data.data;
        } else {
          this.options = [];
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.divf {
  float: left;
}
.name {
  margin-left: 10px;
}
</style>
